<template>
    <el-menu router unique-opened :default-active="defaultActiveMenu"  class="el-menu-vertical-demo">
        <template v-for="parent in routes[0].children" :key="parent.path">
            <el-sub-menu v-if="parent.children" :index="`/${parent.path}`">
                <template #title>
                    <el-icon>
                        <component :is="parent.icon"></component>
                    </el-icon>
                    <span>{{ parent.label }}</span>
                </template>
                <el-menu-item v-for="child in parent.children" :key="child.path" :index="`/${parent.path}/${child.path}`">
                     <el-icon>
                            <component :is="child.icon"></component>
                        </el-icon>
                    {{child.label }}
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="`/${parent.path}`">
                <el-icon>
                    <component :is="parent.icon"></component>
                </el-icon>
                <span>{{ parent.label }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
import { routes } from '@/router'
import { SwitchFilled, User, Search, Promotion, ChatDotRound, Histogram, Mic, VideoCameraFilled,Service, ChromeFilled, Headset, Memo,Connection,Star, Setting, Tickets, List } from '@element-plus/icons-vue'

export default {
    data() {
        return {
            result: [],
            routes,
            defaultActiveMenu:''
        }
    },
    components: {
        SwitchFilled,
        User,
        Search,
        Promotion,
        ChatDotRound,
        Histogram,
        Mic,
        VideoCameraFilled,
        Service,
        ChromeFilled,
        Headset,
        Memo,
        Connection,
        Star,
        Setting,
        Tickets,
        List
    },
    methods: {

        iteratorRouter(path) {

            path.forEach(parent => {
                if (!parent.children) {
                    this.result.push(parent)
                } else {
                    parent.children.forEach(child => {
                        if (child.children) {
                            this.iteratorRouter(child.children)
                        } else {
                            this.result.push(child)
                        }

                    })
                }
            });

        }
    },
    created() {
        this.iteratorRouter(routes)
    },
    watch: {
        $route: {
            handler(currentRoute) {
            this.defaultActiveMenu =  currentRoute.fullPath;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    min-width: 200px;
}
</style>
